<script setup lang="ts">
import { ref } from 'vue'
import { selectTalkListService } from '@/api/talk'
import { addCommentService } from '@/api/comment'
import { ElMessage } from 'element-plus'
import {
    ChatDotSquare,
} from '@element-plus/icons-vue'
import ChildComponent from './TalkCommentView.vue'
//获取说说列表
const talks = ref([
    {
        "id": 1,
        "author": "zhangSan",
        "content": "测试",
        "status": 1,
        "createBy": 1,
        "createTime": "",
        "updateTime": ""
    }
])
const selectTalkList = async () => {
    let result = await selectTalkListService()

    //渲染视图
    talks.value = result.data;
    console.log(talks.value)
}
selectTalkList()


//添加评论表单模型
const commentForm = ref({
    type: '1',
    titleId: 1,
    pid: -1,
    content: "",
    toCommentUserId: -1,
})
const clearCommentForm = () => {
    commentForm.value = {
        type: '1',
        titleId: 1,
        pid: -1,
        content: "",
        toCommentUserId: -1
    }
}
//说说标题id
const titleId = ref(1)
//发表评论对话框
const dialogVisible = ref(false)
const showdialog = (id: number) => {
    dialogVisible.value = true
    titleId.value = id
    commentForm.value.titleId = titleId.value
}
const change = ref(0)
//发表评论
const publishComment = async () => {
    let result = await addCommentService(commentForm.value) as any
    ElMessage.success(result.msg ? result.msg : '发表成功')
    //刷新评论区子组件
    change.value++;
    clearCommentForm()
    dialogVisible.value = false
}

</script>

<template>
    <div v-for="talk in talks" :key="talk.id" class="card">
        <el-card shadow="never" :body-style="{ padding: '0px', border: 'none' }"
            style="max-width: 600px;border: none !important;">
            <div class="card-header">
                <el-avatar :size="50" :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
                <span style="color: #057ee2;margin-left: 10px; font-size: 15px;">{{ talk.author }}</span>
            </div>
            <div v-html="talk.content" class="card-content">
            </div>
            <div class="card-footer">
                <span style="color: #909399;">{{ talk.createTime }}</span>
                <el-button style="margin-left: auto;font-size: 18px;" :icon="ChatDotSquare" text
                    @click="showdialog(talk.id)">评论</el-button>
            </div>
            <!-- 有评论内容时展示评论子组件 -->
            <div>
                <ChildComponent :titleId="talk.id" :key="change"/>
            </div>
        </el-card>
        <el-divider />
    </div>
    <el-dialog v-model="dialogVisible">
        <el-input type="textarea" v-model="commentForm.content" placeholder="发表评论" :rows="1"></el-input>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false; clearCommentForm()">取消</el-button>
                <el-button type="primary" @click="publishComment()">发表</el-button>
            </div>
        </template>
    </el-dialog>


</template>

<style lang="scss" scoped>
.card {
    margin-left: 100px;
    margin-top: 50px;
    justify-content: space-between;
    /* 两端对齐，并且项目之间的间隔相等 */
    text-align: left;

    .card-header {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .card-content {
        margin-left: 58px;
    }

    .card-footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 58px;
        margin-top: 5px;

    }
}
</style>